<template>
    <div class="organize_wrap">
        <svg ref="svgRef" :width="svg.width" :height="svg.height" preserveAspectRatio="xMidYMid meet">
            <g v-for="(item, index) in newTreeData" :transform="`translate(${item.x},${item.y})`">
                <rect :x="0" :y="0" :width="item.node.width" :height="item.node.height" fill="#eee" rx="5" ry="5"/>
                <text :x="5" :y="15">{{ item.node.label }}</text>
            </g>

            <!-- 坐标标记点 -->
            <g v-for="(item, index) in newTreeData" :transform="`translate(${item.x},${item.y})`">
                <!-- 不设置偏移量，circle会默认位于元素左上角 -->
                <circle v-if="item.fatherId" :cx="0" :cy="item.node.height / 2" r="5" fill="tomato"/>
                <circle v-else :cx="item.node.width/2" :cy="item.node.height / 2" r="5" fill="tomato"/>
            </g>
            <g v-for="(item, index) in newTreeData">
                <line
                    v-if="item.fatherId"
                    :x1="item.x"
                    :y1="item.y + item.node.height / 2"
                    :x2="findParent(item).x + findParent(item).node.width / 2"
                    :y2="findParent(item).y + findParent(item).node.height / 2"
                    stroke="black"
                />
            </g>
        </svg>
    </div>
</template>

<script setup>
import { nextTick } from 'vue';
import CarrotTree from './core/CarrotTree';
import { nodes } from './treeData';

const svgRef = ref(null)
const newTreeData = ref([])
const svg = reactive({
    width: 1100,
    height: 600,
    nodes
});

function findParent(item) {
    return this.newTreeData.find(parentItem => parentItem.id === item.fatherId);
}

nextTick(() => {
    const carrotTree = new CarrotTree({
        el: svgRef.value
    })
    newTreeData.value = carrotTree.layout(nodes)
    console.log(newTreeData.value, 4878);
})
</script>

<style lang="scss" src="./style.scss"></style>
